<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>华丽的标题</title>
</head>
<body>
	<h1>测试page visibility API</h1>
	<script>
	//document.hidden  判断页面是否处于可见状态，可见false，不可见true
	//visibilityChange  状态改变触发的事件

	window.onload = function() {
		console.log(document.webkitHidden);//可见状态是false
		console.log(document.visibilityState);//可见状态值
		var hidden,visibilityChange;
		if(typeof document.hidden !== "undefind") {
			hidden = 'hidden';
			visibilityChange = 'visibilitychange';
		} else if(typeof document.mozHidden !== "undefind") {
			hidden = 'mozhidden';
			visibilityChange = 'mozvisibilitychange';
		} else if(typeof document.webkitHidden !== "undefind") {
			hidden = 'webkithidden';
			visibilityChange = 'webkitvisibilitychange';
		} else if(typeof document.msHidden !== "undefind") {
			hidden = 'mshidden';
			visibilityChange = 'msvisibilitychange';
		}
		document.addEventListener(visibilityChange,handleVisibilityChange,false);
		function handleVisibilityChange() {
			if(document[hidden]) {
				document.title = "页面出bug了"
			} else {
				document.title = "华丽的标题"
			}
		}
	}
		
	</script>
</body>
</html>